<template>
  <div id="set-forgetword">
    <h2>正在重新设置密码</h2>
    <div class="from">
      <group>
        <x-input type="text" v-model="codeval" class="weui-vcode" placeholder="请输入短信验证码">
          <div slot="label">
            <img src="../../static/img/yanzhengma@2x.png" ><span>验证码</span>
          </div>
          <div @click="sendcode" slot="right" class="weui-vcode-btn" style="color:rgb(47, 120, 236)"  v-bind:class="[start? 'vcode-inactive':'vcode-active']">{{setTime()}}</div>
          <countdown style="display:none" slot="right" :start="start" @on-finish="timeFinish" v-model="time"></countdown>
        </x-input>
        <x-input v-model="password" type="password"  placeholder="新的登录密码">
          <div slot="label">
            <img src="../../static/img/mima@2x.png" ><span>新密码</span>
          </div>
        </x-input>
        <x-input v-model="repassword" type="password"  placeholder="确认密码（需与新密码一致）">
          <div slot="label">
            <img slot="label" src="../../static/img/mima@2x.png" ><span>确认密码</span>
          </div>
        </x-input>
      </group>
      <x-dialog v-model="showHideOnBlur" class="dialog-demo image-code" hide-on-blur>
        <x-input :show-clear="false" placeholder="请输入图形验证码" v-model="imageCode" class="weui-cell_vcode ">
          <img slot="label" src="../../static/img/mima@2x.png" >
          <img slot="right" @click="imgevent" class="weui-vcode-img" :src="urlImgCode + captchaid">
        </x-input>
        <div @click="confirmImgCode" class="confirm">
          <span>确定</span>
        </div>
      </x-dialog>
      <div class="share" @click="submit">确定</div>
    </div>
  </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import { XInput, Group, Flexbox, FlexboxItem, XButton, Countdown, TransferDomDirective as TransferDom, XDialog } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  directives: {
    TransferDom
  },
  data () {
    return {
      start: false,
      time: 60,
      showHideOnBlur: false,
      codeval: '',
      password: '',
      repassword: '',
      tokenval: '',
      imageCode: '', // 图片验证码
      urlImgCode: this.$store.state.imgvcode,
      captchaid: ''
    }
  },
  components: {
    XInput,
    Group,
    Flexbox,
    FlexboxItem,
    XButton,
    Countdown,
    XDialog
  },
  created () {
    window.document.title = '设置密码'
    this.tokenval = utils.AnonToken(timeStamp)
  },
  methods: {
    imgevent () {
      this.captchaid = '00' + utils.randomString(32)
    },
    // 发送验证码
    sendcode () {
      if (this.start) {
        return
      } else {
        this.imageCode = ''
        this.showHideOnBlur = !this.showHideOnBlur
        this.captchaid = '00' + utils.randomString(32)
      }
    },
    confirmImgCode () {
      var params = {
        captcha: this.imageCode,
        captchaId: this.captchaid
      }
      var self = this
      if (this.imageCode === '') {
        this.$vux.toast.show({
          text: '请输入图形码',
          type: 'warn',
          width: '4rem'
        })
      } else {
        api.validcode(params).then(res => {
          if (res.status === '200') {
            this.showHideOnBlur = false
            self.start = true
            api.sendCode({
              token: self.tokenval,
              timestamp: timeStamp,
              mobile: utils.getQueryString('mobile'),
              type: 1,
              sendType: 2,
              from: 0,
              captcha: this.imageCode,
              captchaId: this.captchaid
            }).then(res => {
              console.log(res)
              if (res.status === '200') {
                self.$vux.toast.show({
                  text: res.message,
                  type: 'success',
                  width: '4rem'
                })
              } else {
                this.$vux.toast.show({
                  text: res.message,
                  type: 'warn',
                  width: '4rem'
                })
              }
            })
          } else {
            this.captchaid = '00' + utils.randomString(32)
            this.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    },
    // 提交
    submit () {
      if (this.codeval === '') {
        this.$vux.toast.show({
          text: '请输入短信验证码',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.password === '') {
        this.$vux.toast.show({
          text: '请输入新密码',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.repassword === '') {
        this.$vux.toast.show({
          text: '请再次输入新密码',
          type: 'warn',
          width: '4rem'
        })
      } else if (passwordReg.test(this.password) === false || this.password.length <= 5) {
        this.$vux.toast.show({
          text: '密码至少为6位数字和字母组合',
          type: 'warn',
          width: '4rem'
        })
      } else if (this.password !== this.repassword) {
        this.$vux.toast.show({
          text: '请两次输入密码不一致',
          type: 'warn',
          width: '4rem'
        })
      } else {
        api.validate({
          token: this.tokenval,
          timestamp: timeStamp,
          mobile: utils.getQueryString('mobile'),
          type: 1,
          sendType: 2,
          vcode: this.codeval,
          from: 0
        }).then(res => {
          if (res.status === '200') {
            this.forgetPassword()
          } else {
            this.$vux.toast.show({
              text: res.message,
              type: 'warn',
              width: '4rem'
            })
          }
        })
      }
    },
    forgetPassword () {
      api.forget({
        token: this.tokenval,
        timestamp: timeStamp,
        mobile: utils.getQueryString('mobile'),
        vcode: this.codeval,
        newPassword: this.password
      }).then(res => {
        console.log(res, 2)
        if (res.status === '200') {
          // utils.redirectWx('-2')
          this.$router.push('/passport/login')
        } else {
          this.$vux.toast.show({
            text: res.message,
            type: 'warn',
            width: '4rem'
          })
        }
      })
    },
    setTime () {
      if (this.start) {
        return '重新发送(' + this.time + ')'
      } else {
        return '发送验证码'
      }
    },
    timeFinish () {
      this.start = false
      this.time = 60
    }
  }
}
</script>

